<template>
  <div>
    <!-- 1.绑定字符串语法 -->
    <div :class="isActive ? 'red' : ''">class绑定字符串1</div>
    <div :class="className">class绑定字符串2</div>
    <!-- 2.对象语法：{'active': boolean} or { active: boolean} -->
    <div :class="{ active: isActive, yellow: isActive }">class绑定对象1</div>
    <!-- 3.对象可以有多个键值对 -->
    <div :class="{ active: isActive, title: true }">class绑定对象2</div>
    <!-- 4.默认的class和动态的class结合 -->
    <div class="abc cba" :class="{ active: isActive, title: true }">
      默认的class和动态的class结合
    </div>
    <!-- 5.将对象放到一个单独的属性中 -->
    <div class="abc cba" :class="classObj">绑定属性中的对象</div>
    <!-- 6.将返回的对象放到一个methods(computed)方法中 -->
    <div class="abc cba" :class="getClassObj()">
      绑定methods/computed返回的对象
    </div>
    <hr />
    <!-- 绑定class的数组语法 -->
    <div :class="['abc', title]">v-bind绑定class-数组语法</div>
    <div :class="['abc', title, isActive ? 'active' : '']">
      v-bind绑定class-数组语法
    </div>
    <div :class="['abc', title, { active: isActive }]">
      v-bind绑定class-数组语法
    </div>
    <button @click="toggle">切换isActive</button>
  </div>
</template>

<script>
export default {
  name: 'page-day4',
  data() {
    return {
      isActive: true,
      className: 'className',
      title: 'cba',
      classObj: {
        active: true,
        title: true
      }
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
      this.title = ''
    },
    getClassObj() {
      return {
        active: false,
        title: true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.yellow {
  color: yellow;
}
.active {
  color: green;
}
.className {
  color: blueviolet;
}
.title {
  font-size: 30px;
}
</style>
